<template>
<div id="campus-login-container" class="html body">
    <el-button type="text" class="admin-enter" @click="dialogAdminVisible=true">管理员入口</el-button>
    <!-- <img src="https://img1.baidu.com/it/u=1070224605,954680268&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=301" alt="" /> -->
    <div class="campus-app-title">
        <h1>校园招聘</h1>
    </div>
    <!-- 登录组件 -->
    <div class="campus-login-tab">
        <el-tabs v-model="activeName" class="campus-login-tabs">
            <!-- 应届生用户登录 -->
            <el-tab-pane label="我要找工作" name="graduate" class="campus-login-graduate">
                <el-form label-width="100px" :model="graduateLoginForm" :rules="graduateLoginFormRules" ref="graduateLoginForm" class="campus-login-graduate-form">
                    <div>
                        <el-form-item label="用户" prop="username">
                            <el-input type="text" v-model="graduateLoginForm.username" placeholder="请输入用户名" style="width: 230px"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="graduateLoginForm.password" type="password" placeholder="请输入你的密码" style="width: 230px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="graduateLoginMethod">登录</el-button>
                            <el-button @click="dialogGraduateFormVisible = true">注册</el-button>
                            <el-button @click="dialogGraduateForgotFormVisible = true">忘记密码</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
            <!-- 企业用户登录 -->
            <el-tab-pane label="我要招人" name="enterprise" class="campus-login-enterprise">
                <el-form :label-position="labelPosition" label-width="100px" :model="enterpriseLoginForm" ref="enterpriseLoginFormRef" :rules="enterpriseLoginFormRules" class="campus-login-enterprise-form">
                    <div>
                        <el-form-item label="企业用户" prop="username">
                            <el-input v-model="enterpriseLoginForm.username" placeholder="请输入用户名" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item label="企业密码" prop="password">
                            <el-input type="password" v-model="enterpriseLoginForm.password" placeholder="请输入你的密码" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="enterpriseLoginMethod">登录</el-button>
                            <el-button @click="dialogEnterpriseFormVisible = true">注册</el-button>
                            <el-button @click="dialogEnterpriseForgotFormVisible = true">忘记密码</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
    <!-- 应届生注册对话框 -->
    <el-dialog title="欢迎应届生注册" :visible.sync="dialogGraduateFormVisible" :modal="false" append-to-body>
        <!-- 应届生注册表单 -->
        <el-form :model="graduateResForm" ref="graduateResFormRef" :rules="graduateResFormRules" :label-width="formLabelWidth" :inline="true">
            <el-form-item label="用户名" prop="gname">
                <el-input type="text" placeholder="请输入用户名" v-model="graduateResForm.gname" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="gnickname">
                <el-input type="text" placeholder="请输入昵称" v-model="graduateResForm.gnickname" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="gpassword">
                <el-input type="text" placeholder="请输入密码" v-model="graduateResForm.gpassword" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gsex">
                <el-radio-group v-model="graduateResForm.gsex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="gage">
                <el-input type="text" placeholder="请输入年龄" v-model.number="graduateResForm.gage" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="gbirthday">
                <el-date-picker v-model="graduateResForm.gbirthday" align="right" type="date" placeholder="选择日期" style="width: 150px">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" prop="gphone">
                <el-input type="text" placeholder="请输入手机号" v-model="graduateResForm.gphone" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="学校" prop="gschoolname">
                <el-input type="text" placeholder="请输入学校" v-model="graduateResForm.gschoolname" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input type="text" placeholder="请输入邮箱" v-model="graduateResForm.email" style="width: 150px"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogGraduateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="graduateResMethod">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 企业用户注册对话框 -->
    <el-dialog title="欢迎企业用户入驻" :visible.sync="dialogEnterpriseFormVisible" :modal="false" append-to-body>
        <el-form :model="enterpriseResForm" ref="enterpriseResFormRef" :rules="enterpriseResFormRules" :label-width="formLabelWidth" :inline="true">
            <el-form-item label="用户名" prop="hname">
                <el-input type="text" placeholder="请输入用户名" v-model="enterpriseResForm.hname" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="hnickname">
                <el-input type="text" placeholder="请输入昵称" v-model="enterpriseResForm.hnickname" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="hpassword">
                <el-input type="text" placeholder="请输入密码" v-model="enterpriseResForm.hpassword" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="hage">
                <el-input type="text" placeholder="请输入年龄" v-model.number="enterpriseResForm.hage" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="hsex">
                <el-radio-group v-model="enterpriseResForm.hsex" style="width: 150px">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="hphone">
                <el-input type="text" placeholder="请输入手机号" v-model="enterpriseResForm.hphone" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input type="text" placeholder="请输入邮箱" v-model="enterpriseResForm.email" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="公司" prop="company">
                <el-input type="text" placeholder="请输入公司" v-model="enterpriseResForm.company" style="width: 150px"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEnterpriseFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="enterpriseResMethod">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 应届生忘记密码对话框 -->
    <el-dialog title="重置密码" :visible.sync="dialogGraduateForgotFormVisible" :modal="false" append-to-body>
        <el-form :model="graduateForgetForm" :rules="graduateForgetFormRules" ref="graduateForgetFormRef" :label-width="formLabelWidth" :inline="true">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="graduateForgetForm.username" type="text" placeholder="请输入用户名" style="width: 150px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="resetPassword">
                <el-input v-model="graduateForgetForm.resetPassword" type="text" placeholder="请输入新密码" style="width: 150px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password">
                <el-input v-model="graduateForgetForm.password" type="text" placeholder="重新输入密码" style="width: 150px" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogGraduateForgotFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="graduateResetPassword">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 企业用户重置密码表单对话框 -->
    <el-dialog title="重置密码" :visible.sync="dialogEnterpriseForgotFormVisible" :modal="false" append-to-body>
        <el-form :model="enterpriseForgetForm" :rules="enterpriseForgetFormRules" ref="enterpriseForgetFormRef" :label-width="formLabelWidth" :inline="true">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="enterpriseForgetForm.username" type="text" placeholder="请输入用户名" style="width: 150px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="resetPassword">
                <el-input v-model="enterpriseForgetForm.resetPassword" type="text" placeholder="请输入新密码" style="width: 150px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password">
                <el-input v-model="enterpriseForgetForm.password" type="text" placeholder="重新输入密码" style="width: 150px" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEnterpriseForgotFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="enterpriseResetPassword">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 管理员登录表单对话框 -->
    <el-dialog title="管理员登录" width="30%" :visible.sync="dialogAdminVisible" :modal="false" append-to-body>
        <el-form :model="adminForm">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="adminForm.username" type="text" style="width:150px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="adminForm.password" type="password" style="width:150px" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAdminVisible = false">取 消</el-button>
            <el-button type="primary" @click="adminLogin">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    name: "RecommendLogin",

    data() {
        return {
            formLabelAlign: {},
            activeName: "graduate",
            labelPosition: "",
            dialogGraduateFormVisible: false,
            dialogEnterpriseFormVisible: false,
            dialogGraduateForgotFormVisible: false,
            dialogEnterpriseForgotFormVisible: false,
            dialogAdminVisible: false,
            adminForm: {
                username: "admin",
                password: ""
            },
            //   应届生登录表单
            graduateLoginForm: {
                username: "",
                password: "",
            },
            //   企业登录表单
            enterpriseLoginForm: {
                username: "",
                password: "",
            },
            //   应届生注册表单
            graduateResForm: {
                gname: "",
                gnickname: "",
                gpassowrd: "",
                gsex: "",
                gage: "",
                gbirthday: new Date(),
                gphone: "",
                gschoolname: "",
                email: "",
            },
            // 企业注册表单
            enterpriseResForm: {
                hname: "",
                hnickname: "",
                hpassword: "",
                hage: "",
                hsex: "",
                hphone: "",
                email: "",
                company: "",
            },
            //   应届生重置密码表单
            graduateForgetForm: {
                username: "",
                resetPassword: "",
                password: "",
            },
            // 企业重置密码表单
            enterpriseForgetForm: {
                username: "",
                resetPassword: "",
                password: "",
            },
            //   应届生登录表单验证
            graduateLoginFormRules: {
                username: [{
                    required: true,
                    message: "用户名不能为空",
                    trigger: "blur"
                }],
                password: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 12,
                        message: "长度在 6到 12 个字符",
                        trigger: "blur"
                    },
                ],
            },
            //   企业登录表单验证
            enterpriseLoginFormRules: {
                username: [{
                    required: true,
                    message: "用户名不能为空",
                    trigger: "blur"
                }, ],
                password: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 12,
                        message: "长度在 6到 12 个字符",
                        trigger: "blur"
                    },
                ],
            },
            //   应届生注册表单验证
            graduateResFormRules: {
                gname: [{
                        required: true,
                        message: "用户名不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    },
                ],
                gnickname: [{
                    required: true,
                    message: "昵称不能为空",
                    trigger: "blur"
                }, ],
                gpassword: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 12,
                        message: "长度在 6 到 12 个字符",
                        trigger: "blur",
                    },
                ],
                gsex: [{
                    required: true,
                    message: "性别不能为空",
                    trigger: "blur"
                }],
                gage: [{
                    required: true,
                    message: "年龄不能为空",
                    trigger: "blur"
                }],
                gbirthday: [{
                    required: true,
                    message: "出生日期不能为空",
                    trigger: "blur",
                    type: "date",
                }, ],
                gphone: [{
                    required: true,
                    message: "手机号不能为空",
                    trigger: "blur"
                }, ],
                gschoolname: [{
                    required: true,
                    message: "学校不能为空",
                    trigger: "blur"
                }, ],
                email: [{
                    required: true,
                    message: "邮箱不能为空",
                    trigger: "blur"
                }],
            },
            //   企业注册表单验证
            enterpriseResFormRules: {
                hname: [{
                    required: true,
                    message: "用户名不能为空",
                    trigger: "blur"
                }],
                hnickname: [{
                    required: true,
                    message: "昵称不能为空",
                    trigger: "blur"
                }, ],
                hpassword: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 12,
                        message: "长度在 6 到 12 个字符",
                        trigger: "blur",
                    },
                ],
                hage: [{
                    required: true,
                    message: "年龄不能为空",
                    trigger: "blur"
                }],
                hsex: [{
                    required: true,
                    message: "性别不能为空",
                    trigger: "blur"
                }],
                hphone: [{
                    required: true,
                    message: "手机号不能为空",
                    trigger: "blur"
                }, ],
                email: [{
                    required: true,
                    message: "邮箱不能为空",
                    trigger: "blur"
                }],
                company: [{
                    required: true,
                    message: "公司不能为空",
                    trigger: "blur"
                }],
            },
            //   应届生重置密码表单验证
            graduateForgetFormRules: {
                username: [{
                    required: true,
                    message: "用户名不能为空",
                    trigger: "blur"
                }, ],
                resetPassword: [{
                    required: true,
                    message: "新密码不能为空",
                    trigger: "blur"
                }, ],
                password: [{
                    required: true,
                    message: "确认密码不能为空",
                    trigger: "blur"
                }, ],
            },
            // 企业用户重置密码表单验证
            enterpriseForgetFormRules: {
                username: [{
                    required: true,
                    message: "用户名不能为空",
                    trigger: "blur"
                }, ],
                resetPassword: [{
                    required: true,
                    message: "新密码不能为空",
                    trigger: "blur"
                }, ],
                password: [{
                    required: true,
                    message: "确认密码不能为空",
                    trigger: "blur"
                }, ],
            },
            formLabelWidth: "120px",
        };
    },

    mounted() {},
    // 所有的事件集合
    methods: {
        // 应届生登录方法
        graduateLoginMethod() {
            this.$refs.graduateLoginForm.validate((valid) => {
                if (!valid) {
                    this.$message({
                        message: '输入为空',
                        type: 'error'
                    });
                    return;
                } else {
                    // 发送登录请求
                    this.$axios
                        .post("/graduate/graduateLogin", this.graduateLoginForm)
                        .then((res) => {
                            var token = res.data.desc;
                            if (token === "未注册") {
                                this.$message({
                                    message: "亲,未注册",
                                    type: "error",
                                });
                            } else if (token === "密码错误") {
                                this.$message({
                                    message: "亲,密码错误",
                                    type: "error",
                                });
                            } else {
                                // 保存token
                                window.localStorage.setItem("token", token);
                                this.$message({
                                    message: "登录成功",
                                    type: "success",
                                });
                                this.$router.push("/gradmain");
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                            this.$message({
                                message: "系统错误",
                                type: "error",
                            });
                        });
                }
            });
        },
        // 企业登录方法
        enterpriseLoginMethod() {
            //  表单验证
            this.$refs.enterpriseLoginFormRef.validate((valid) => {
                if (!valid) {
                    this.$message({
                        message: "填写有误,请重新填写",
                        type: "error",
                    });
                } else {
                    // 验证通过发送请求
                    this.$axios
                        .post("/enterprise/enterpriseLogin", this.enterpriseLoginForm)
                        .then((res) => {
                            var token = res.data.desc;
                            if (token === "未注册") {
                                this.$message({
                                    message: "亲,未注册",
                                    type: "error",
                                });
                            } else if (token === "密码错误") {
                                this.$message({
                                    message: "亲,密码错误",
                                    type: "error",
                                });
                            } else {
                                // 保存token
                                window.localStorage.setItem("token", token);
                                this.$message({
                                    message: "登录成功",
                                    type: "success",
                                });
                                this.$router.push("/entermain");
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                }
            });
        },
        // 应届生注册方法
        graduateResMethod() {
            // 表单验证
            this.$refs.graduateResFormRef.validate((valid) => {
                if (!valid) {
                    this.$message({
                        message: '输入为空',
                        type: 'error'
                    });
                    return;
                } else {
                    this.$axios
                        .post("/graduate/graduateRes", this.graduateResForm)
                        .then((res) => {
                            var response = res.data.desc;
                            if (response === "已注册") {
                                this.$message({
                                    message: "亲,已经注册了请登录",
                                    type: "error",
                                });
                            } else if (response === "注册失败") {
                                this.$message({
                                    message: "亲,注册失败请重新注册",
                                    type: "error",
                                });
                            } else if (response === "注册成功") {
                                this.$message({
                                    message: "亲,注册成功请登录",
                                    type: "success",
                                });
                                // 如果注册成功清空表单;关闭对话框
                                this.dialogGraduateFormVisible = false;
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                            this.$message({
                                message: "系统错误!!!",
                                type: "error",
                            });
                        });
                }
            });
        },
        // 企业用户注册方法
        enterpriseResMethod() {
            // 表单验证
            this.$refs.enterpriseResFormRef.validate((valid) => {
                if (!valid) {
                    this.$message({
                        message: '输入为空',
                        type: 'error'
                    });
                    return;
                } else {
                    // 验证通过发送请求
                    this.$axios
                        .post("/enterprise/enterpriseRes", this.enterpriseResForm)
                        .then((res) => {
                            var response = res.data.desc;
                            if (response === "已注册") {
                                this.$message({
                                    message: "亲,已经注册了请登录",
                                    type: "error",
                                });
                            } else if (response === "注册失败") {
                                this.$message({
                                    message: "亲,注册失败,请查询注册",
                                    type: "error",
                                });
                            } else if (response === "注册成功") {
                                this.$message({
                                    message: "注册成功请登录",
                                    type: "success",
                                });
                                // 注册成功;清空表单,关闭对话框
                                this.dialogEnterpriseFormVisible = false;
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                            this.$message({
                                message: "系统错误!!!",
                                type: "error",
                            });
                        });
                }
            });
        },
        // 应届生重置密码方法
        graduateResetPassword() {
            // 表单验证
            this.$refs.graduateForgetFormRef.validate((valid) => {
                if (!valid) {
                    this.$message({
                        message: "填写有误,请检查",
                        type: "error",
                    });
                } else {
                    // 表单验证通过再验证两次密码是否一致
                    if (
                        !(
                            this.graduateForgetForm.resetPassword ===
                            this.graduateForgetForm.password
                        )
                    ) {
                        this.$message({
                            message: "两次输入的密码不一致",
                            type: "error",
                        });
                    } else {
                        // 验证通过可以发送请求
                        this.$axios
                            .post("/graduate/graduateResetPassword", this.graduateForgetForm)
                            .then((res) => {
                                var response = res.data.desc;
                                if (response === "重置失败") {
                                    this.$message({
                                        message: "亲,重置失败,再试一下",
                                        type: "error",
                                    });
                                } else if (response === "重置成功") {
                                    this.$message({
                                        message: "亲重置成功,请登录",
                                        type: "success",
                                    });
                                    //关闭对话框
                                    this.dialogGraduateForgotFormVisible = false;
                                }
                            })
                            .catch((error) => {
                                console.log(error);
                                this.$message({
                                    message: "系统错误!!!",
                                    type: "error",
                                });
                            });
                    }
                }
            });
        },
        // 企业用户重置密码方法
        enterpriseResetPassword() {
            // 表单验证
            this.$refs.enterpriseForgetFormRef.validate((valid) => {
                if (!valid) {
                    this.$message({
                        message: "填写有误",
                        type: "error",
                    });
                } else {
                    // 表单验证通过验证两次密码是否一致
                    if (
                        !(
                            this.enterpriseForgetForm.resetPassword ===
                            this.enterpriseForgetForm.password
                        )
                    ) {
                        this.$message({
                            message: "两次密码不一致,请重新输入",
                            type: "error",
                        });
                    } else {
                        // 验证通过可以发送请求
                        this.$axios
                            .post(
                                "/enterprise/enterpriseResetPassword",
                                this.enterpriseForgetForm
                            )
                            .then((res) => {
                                var response = res.data.desc;
                                if (response === "重置失败") {
                                    this.$message({
                                        message: "亲,重置失败",
                                        type: "error",
                                    });
                                } else if (response === "重置成功") {
                                    this.$message({
                                        message: "亲,重置成功,请登录",
                                        type: "success",
                                    });
                                    //关闭对话框
                                    this.dialogEnterpriseForgotFormVisible = false;
                                }
                            })
                            .catch((error) => {
                                console.log(error);
                                this.$message({
                                    message: "系统错误!!!",
                                    type: "error",
                                });
                            });
                    }
                }
            });
        },
        // 管理员登录
        adminLogin() {
            this.$axios.post('/admin/adminLogin', this.adminForm).then((res) => {
                if (res.data.desc === '用户名或密码错误') {
                    this.$message({
                        message: "系统错用户名或密码错误!!!",
                        type: "error"
                    });
                    return
                } else {
                    var token = res.data.desc;
                    window.localStorage.setItem("token", token);
                    this.$message({
                        message: "登录成功",
                        type: "success"
                    });
                    this.$router.push('/adminmain')
                }
            }).catch((error) => {
                console.log(error);
                this.$message({
                    message: "系统错误!!!",
                    type: "error"
                })
            })
        }
    },
};
</script>

<style scoped>
div /deep/.el-tabs__nav-scroll {
    padding-left: 217px;
}

.campus-login-tab {
    position: absolute;
    top: 100px;
    left: 28%;
    width: 600px;
    height: 350px;
    border: 1px white solid;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.campus-login-graduate {
    margin: 0px;
    padding: 0px;
    width: 600px;
    height: 295px;
}

.campus-login-enterprise {
    margin: 0px;
    padding: 0px;
    width: 600px;
    height: 295px;
}

.campus-login-graduate-form {
    width: 100%;
    height: 100%;
}

.campus-login-graduate-form div {
    margin-left: 30px;
    margin-top: 5px;
}

.campus-login-enterprise-form div {
    margin-left: 40px;
    margin-top: 5px;
}

h1 {
    font-weight: normal;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    padding-left: 20%;
}

img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.campus-app-title {
    width: 400px;
    margin: auto;
    margin-top: 0px;
}

.html {
    height: 100%;
    width: 100%;
    position: fixed;
}

.body {
    margin: 0;
    padding: 0;
    border: 0;
}

#campus-login-container {
    background-image: url(https://img2.baidu.com/it/u=2254528714,2812434823&fm=26&fmt=auto);
}

.admin-enter {
    float: right;
    margin-right: 30px;
}
</style>
